<template>
  <div class="portal">
    <div class="nav">
      <div class="wrap">
        <img class="logo" :src="logo"/>
        <span class="title">综合财务管理系统</span>
        <!-- 菜单信息 -->
        <span v-for="m of otherMenu" :key="m.code">
          <img :src="icons[m.code]" alt="">
          <a :href="m.url" :target="'_' + m.target">{{m.name}}</a>
        </span>
        <!-- 个人信息 -->
        <el-dropdown class="info">
          <span class="info-title">
            <img :src="avatar" alt="">
            <span class="name">{{username}}<i class="el-icon-arrow-down el-icon--right"></i></span>
          </span>
          <el-dropdown-menu slot="dropdown" class="info">
            <el-dropdown-item
              v-for="m of infoMenu"
              :key="m.name"
              v-show="m.code !== 'TOP_other'">
              <span>
                <img :src="icons[m.code]" alt="">
                <a :href="m.url" :target="'_' + m.target">{{m.name}}</a>
              </span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="content">
      <!-- 菜单 -->
      <div class="menu area">
        <area-title :src="menu" title="报销业务场景" href="/forward?__URL=portal/billcenter/billCenter&type=public"></area-title>
        <nav-menu
          class="nav-menu"
          :data="menuViewData"
          @change="menuSelect">
        </nav-menu>
        <pagination
          :page-size="menuPageSize"
          :total-size="menuSize"
          @change="menuPageChange">
        </pagination>
      </div>
      <div class="middle">
        <!-- 待办任务 -->
        <div class="task area">
          <area-title :src="task" title="我的待办" :is-more="false"></area-title>
          <el-popover
            class="pop-task"
            ref="popTask"
            placement="right"
            width="150"
            trigger="hover">
            <div class="task" v-for="(task, index) of taskData" :key="task.code" :divided="index > 0">
              <a :href="task.url" :target="'_' + task.target">{{task.name}}<span class="alert">({{task.num}})</span></a>
            </div>
          </el-popover>
          <div class="count" v-popover:popTask>
            {{taskInfo.count}}
          </div>
          <p style="font-size: 18px;">待办总数</p>
          <p style="font-size: 14px;">
            共
            <span class="alert">{{taskInfo.type}}</span>类
            <span class="alert">{{taskInfo.count}}</span>条
          </p>
        </div>
        <!-- 工作台 -->
        <div class="platform area">
          <area-title :src="platform" title="我的工作台" href="/forward?__URL=portal/mybills/mybillList"></area-title>
          <div class="items">
            <a
              class="item"
              v-for="item of platData"
              :key="item.code"
              :href="item.url"
              :target="'_' + item.target">
              <div class="img" :class="item.code"></div>
              <span class="name">{{item.name}}</span>
            </a>
          </div>
        </div>
      </div>
      <div class="bottom">
        <!-- 报表 -->
        <div class="report area">
          <area-title :src="report" title="报表中心" href="/forward?__URL=portal/report/reportCenter"></area-title>
          <el-tabs tab-position="left" class="report-tabs" @tab-click="reportChange">
            <el-tab-pane v-for="report of reportData" :key="report.name" :label="report.name">
              <div class="report-content">
                <a
                  class="item"
                  v-for="item of viewReports"
                  :key="item.code"
                  :href="item.url"
                  :target="'_' + item.target">
                  <div class="img" :class="item.code">
                    <img :src="defaultIcon" alt="">
                  </div>
                  <span class="name">{{item.name}}</span>
                </a>
              </div>
              <pagination
                :init-page="reportPage"
                :page-size="reportPageSize"
                :total-size="reportSize"
                @change="reportPageChange">
              </pagination>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 通知 -->
        <div class="message area">
          <area-title :src="message" title="通知公告" href="/forward?__URL=portal/notice/notice"></area-title>
          <div class="news-content">
            <div class="news" v-for="msg of msgData" :key="msg.url">
              <i class="news-icon"><img :src="msgIcon" alt=""></i>
              <a class="msg" :href="msg.url" :target="'_' + msg.target">
                <span class="name">{{msg.name}}</span>
                <span class="date">{{timestampToTime(msg.date)}}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      class="notice"
      title="通知公告"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible">
      <div class="notice-title">{{noticeData.noticeTitle}}</div>
      <div class="creater-info">
        <span class="creater">发布人：{{noticeData.author}}</span>
        <span class="date">{{noticeData.creationDate}}</span>
      </div>
      <div class="notice-content" v-html="noticeData.noticeContent">
      </div>
      <div class="files">
        <p
          class="file"
          v-for="file of noticeData.attachments"
          :key="file.attachmentId"
          @click="downloadFile(file)">
          {{file.attachmentName}}
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import navMenu from './navMenu';
import areaTitle from './areaTitle';
import pagination from './pagination';
import logo from '../assets/logo.png';
import avatar from '../assets/avatar.png';
import menu from '../assets/menu.png';
import task from '../assets/task.png';
import platform from '../assets/platform.png';
import report from '../assets/report.png';
import message from '../assets/message.png';
import msgIcon from '../assets/msg.png';
import defaultIcon from '../assets/default.png';
import timestampToTime from '../es/dateUtils';
import TOP_PERSON_AUTH from '../assets/personAuth.png';
import TOP_USER_INFO from '../assets/userInfo.png';
import TOP_SYSTEM_MANAGE from '../assets/systemManage.png';
import TOP_IMAGE_SCAN from '../assets/imageScan.png';
import TOP_UNIFIEDLOGOUT from '../assets/unifiedlogout.png';
import TOP_SINGLELOGOUT from '../assets/singlelogout.png';
import TOP_HELP from '../assets/help.png';

export default {
  name: 'portal',
  components: { navMenu, areaTitle, pagination },
  data() {
    return {
      icons: {
        TOP_USER_INFO,
        TOP_PERSON_AUTH,
        TOP_SYSTEM_MANAGE,
        TOP_IMAGE_SCAN,
        TOP_UNIFIEDLOGOUT,
        TOP_SINGLELOGOUT,
        TOP_HELP,
      },
      logo,
      avatar,
      defaultIcon,
      username: '未登录',
      userPage: '',
      infoMenu: [],
      otherMenu: [],
      menu,
      task,
      platform,
      report,
      message,
      // 报销数据
      menuData: [],
      menuPage: 1,
      menuPageSize: 8,
      // 任务数据
      taskInfo: {
        type: 0,
        count: 0,
      },
      taskData: [],
      // 工作台数据
      platData: [],
      // 公告数据
      msgData: [],
      msgIcon,
      // 报表数据
      reportData: [],
      selectTab: '0',
      reportPageSize: 2,
      reportPage: 1,
      dialogVisible: false,
      noticeData: {},
    };
  },
  computed: {
    menuSize() {
      return this.menuData.length;
    },
    menuViewData() {
      return this.menuData.slice((this.menuPage - 1) * this.menuPageSize, this.menuPage * this.menuPageSize);
    },
    viewReports() {
      return this.reportData[this.selectTab].roll.slice((this.reportPage - 1) * this.reportPageSize, this.reportPage * this.reportPageSize);
    },
    reportSize() {
      return this.reportData[this.selectTab].roll.length;
    },
  },
  mounted() {
    this.getNotice();
    this.getTopMenus();
    this.getPortalMenu();
    this.getTasks();
    this.getPlatform();
    this.getMessage();
    this.getReports();
  },
  methods: {
    getNotice() {
      this.$http.post('/portal/notice/findNoticeByNoticeDate').then(
        (res) => {
          const data = res.data;
          if (data.success && data.data) {
            this.noticeData = data.data;
            this.dialogVisible = true;
          }
        },
      ).catch(
        (err) => {
          this.$message.error(err);
        },
      );
    },
    menuPageChange(type, page) {
      this.menuPage = page;
    },
    menuSelect(item) {
      window.open(item.famPortalMenuV.url);
    },
    timestampToTime(timestamp) {
      return timestampToTime(timestamp);
    },
    reportChange(tab) {
      this.selectTab = tab.index;
      this.reportPage = 1;
    },
    reportPageChange(type, page) {
      this.reportPage = page;
    },
    // getCenter() {
    //   this.$http.get('/scripts/data/center.json').then(
    //     (res) => {
    //       const data = res.data;
    //     },
    //   ).catch();
    // },
    getTopMenus() {
      this.$http.get('/portal/topmenu/getTopMenus?code=TOP', {
        headers: { 'Cache-Control': 'no-cache' },
      }).then(
        (res) => {
          const data = res.data;
          this.username = data[0].name;
          this.userPage = data[0].url;
          data[0].name = '个人信息';
          this.infoMenu = data;
        },
      ).catch(
        (err) => {
          this.$message.error(err);
        },
      );
      this.$http.get('/portal/topmenu/getTopMenus?code=TOP_other').then(
        (res) => {
          const data = res.data;
          this.otherMenu = data;
        },
      ).catch(
        (err) => {
          this.$message.error(err);
        },
      );
    },
    getPortalMenu() {
      this.$http.get('/portalCenter/getPortalMenu?a=1&b=2').then(
        (res) => {
          const data = res.data;
          this.menuData = data;
        },
      ).catch(
        (err) => {
          this.$message.error(err);
        },
      );
    },
    getTasks() {
      this.$http.post('/portalCenter/listWorkBenchAndStayBills', { branchKey: 'stay', b: 2 }).then(
        (res) => {
          const data = res.data;
          this.taskData = data;
          this.taskInfo.type = data.length;
          this.taskInfo.count = data.reduce((prev, cur) => prev + cur.num, 0);
        },
      ).catch(
        (err) => {
          this.$message.error(err);
        },
      );
    },
    getPlatform() {
      this.$http.post('/portalCenter/listWorkBenchAndStayBills', { branchKey: 'workbench', b: 2 }).then(
        (res) => {
          const data = res.data;
          this.platData = data;
        },
      ).catch(
        (err) => {
          this.$message.error(err);
        },
      );
    },
    getMessage() {
      this.$http.get('/portal/notice/findLatestNotices?a=1&b=2').then(
        (res) => {
          const data = res.data;
          this.msgData = data;
        },
      ).catch(
        (err) => {
          this.$message.error(err);
        },
      );
    },
    getReports() {
      this.$http.get('/portalCenter/getAllReportBills?a=1&b=2').then(
        (res) => {
          const data = res.data;
          this.reportData = data;
        },
      ).catch(
        (err) => {
          this.$message.error(err);
        },
      );
    },
    downloadFile(file) {
      window.open(`/ft/attachment/showFile?fileId=${file.attachmentId}`);
    },
  },
};
</script>

<style lang="scss">
$theme: #d50c0e;
.portal {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
  position: relative;
  overflow: hidden;
  overflow-y: auto;

  .nav {
    width: 100%;
    height: 70px;
    background: linear-gradient(to right, #d50c0e 0%, #f97075 64%, #fe9260 100%);
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .wrap {
      width: 1060px;
      height: 70px;
      position: relative;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .logo {
        width: 144px;
        height: 39px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      .title {
        position: absolute;
        left: 167px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 27px;
        padding: 0 23px;
        border-left: 1px solid #fff;
        height: 42px;
        line-height: 42px;
        color: #fff;
        color: #fff;
        color: #fff;
      }

      &>span {
        margin-left: 25px;
        height: 19px;
        display: flex;
        img {
          width: 20px;
          height: 19px;
          display: inline-block;
        }
        a {
          color: #fff;
          text-decoration: none;
          margin-left: 5px;
          height: 19px;
          line-height: 19px;
        }
      }
      .info {
        margin-left: 40px;
        height: 45px;

        .info-title {
          display: flex;
          .name {
            height: 45px;
            line-height: 45px;
            margin-left: 15px;
            font-size: 18px;
            color: #fff;
          }
        }
      }
    }
  }

  .content {
    position: absolute;
    top: 70px;
    left: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;

    .area {
      box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
    }

    .menu {
      width: 1200px;
      min-height: 300px;
      margin-top: 20px;
      background-color: #fff;
      position: relative;

      .pagination {
        width: 100%;
        top: 150px;
        z-index: 1;
      }

      .nav-menu {
        width: 1082px;
        height: 165px;
        margin: 42.5px 60px;
        border: none;
        z-index: 2;

        .el-menu-item {
          width: 135px;
          height: 165px;

          &.is-active {
            border-bottom: none;
          }

          &:hover {
            border: 1px solid $theme;
            border-bottom-color: $theme!important;

            .name {
              color: $theme;
            }
          }
        }
        .el-submenu {
          width: 135px;
          height: 165px;

          &.is-active {
            border-bottom: none;
          }

          &.is-opened {
            border: 1px solid $theme;
            color: $theme;

            .name {
              color: $theme;
            }
          }

          .el-submenu__title {
            width: 135px;
            height: 165px;
          }
        }
      }
    }

    .middle {
      width: 1200px;
      height: 220px;
      margin-top: 20px;
      position: relative;

      .task {
        width: 300px;
        height: 220px;
        background-color: #fff;
        display: inline-block;
        float: left;
        .count {
          font-size: 60px;
          color: $theme;
          margin: 30px 0 30px 0;
        }
      }

      .platform {
        width: 880px;
        height: 220px;
        background-color: #fff;
        display: inline-block;
        float: right;

        .items {
          display: flex;
          justify-content: space-around;
          align-items: center;

          .item {
            width: 100px;
            height: 120px;
            color: #333;
            text-decoration: none;

            &:hover {
              color: $theme;
            }

            .img {
              width: 62px;
              height: 71px;
              margin: 10px 19px;

              &.WORKBENCH_EXAMINE {
                background: url('../assets/examine.png') center center no-repeat;
              }
              &.WORKBENCH_DRAFT {
                background: url('../assets/draft.png') center center no-repeat;
              }
              &.WORKBENCH_VOUCHER {
                background: url('../assets/voucher.png') center center no-repeat;
              }
              &.WORKBENCH_COMMISSION {
                background: url('../assets/commission.png') center center no-repeat;
              }
              &.WORKBENCH_IMAGE {
                background: url('../assets/image.png') center center no-repeat;
              }
            }
            .name {
              display: inline-block;
              margin-top: 20px;
              font-size: 14px;
            }
          }
        }
      }
    }

    .bottom {
      width: 1200px;
      height: 200px;
      margin-top: 20px;
      position: relative;

      .report {
        display: inline-block;
        width: 590px;
        height: 200px;
        background-color: #fff;
        float: left;

        .report-tabs {
          height: 150px;

          .el-tabs__nav {
            height: 150px;

            .el-tabs__item {
              height: 75px;
              line-height: 75px;
            }
          }

          .el-tab-pane {
            height: 150px;

            .report-content {
              height: 150px;
              position: relative;
              display: flex;
              justify-content: space-around;
              align-items: center;
              margin: 0 60px;
              z-index: 2;

              .item:hover {
                color: $theme;
              }

              a {
                display: inline-block;
                color: #333;
                text-decoration: none;
                width: 70px;
                height: 100px;

                .name {
                  display: inline-block;
                  margin-top: 20px;
                  font-size: 14px;
                }
              }
            }
            .pagination {
              width: 485px;
              z-index: 1;
              top: 55px;
            }
          }
        }
      }

      .message {
        display: inline-block;
        width: 590px;
        height: 200px;
        background-color: #fff;
        float: right;

        .news-content {
          .news {
            height: 30px;
            line-height: 30px;
            position: relative;

            .news-icon {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
            }

            .msg {
              width: 520px;
              display: inline-block;
              border-bottom: 1px dashed #000;
              margin-left: 20px;
              color: #333;
              text-decoration: none;

              .name {
                float: left;
                width: 245px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
                text-align: left;
                font-size: 14px;
              }
              .date {
                float: right;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
}
a {
  text-decoration: none;
  color: #333;
}
.el-dropdown-menu.info {
  width: 220px;

  .el-dropdown-menu__item {
    height: 45px;

    &>span {
      height: 45px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      img {
        width: 22px;
        margin: 0 25px 0 16px;
      }
      a {
        color: #666;
        text-decoration: none;
      }
    }
  }
}

.el-popover.el-popper {
  width: 150px;

  .task {
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-top: 1px solid #cdcdcd;

    &:nth-child(1) {
      border-top: none;
    }
  }
}

span.alert {
  color: $theme;
}

.notice {
  .el-dialog {
    border-radius: 5px;
    min-height: 500px;
  }
  .el-dialog__header {
    background-color: $theme;
    border-radius: 5px 5px 0 0;
    text-align: left;
    color: #fff;
    .el-dialog__title {
      color: #fff;
    }
    .el-icon {
      color: #fff;
    }
  }

  .notice-title {
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #999;
    text-align: center;
    display: block;
  }
  .creater-info {
    text-align: right;
    .date {
      margin-left: 10px;
    }
  }
  .notice-content {
    text-align: left;
  }
  .files {
    text-align: left;
    color: blue;
    cursor: pointer;
  }
}
</style>
